<!DOCTYPE html>
<html>
<head>
    <title>商户信息</title>
    <!--#include("../common/common-link.html"){}-->
    <script src="${ctx}/assets/js/qrcode.min.js"></script>
    <style type="text/css">
        .table-panel .content .info-table {
            text-align: left;
            margin: 10px 0 0 30px;
            width: 100%;
        }

        .table-panel .content .info-table tr {
            height: 33px;
        }

        .table-panel .content .info-table tr.btns td .btn {
            width: 123px;
            outline: none;
            margin-top: 20px;
        }

        .table-panel .content .info-table tr td .need {
            color: red;
        }

        .table-panel .content .info-table tr td.left {
            text-align: right;
            font-size: 15px;
        }

        .table-panel .content .info-table tr td.right {
            text-align: left;
        }

        .table-panel .content .info-table tr td.center {
            text-align: center;
        }

        .table-panel .content .info-table tr td .qr-div .thumbnail {
            width: 260px;
        }

        .table-panel .content .info-table tr td .qr-div .thumbnail .caption {
            text-align: center;
        }

        .table-panel .content .info-table tr td .qr-div .thumbnail h3 {
            padding-bottom: 10px;
        }

        .table-panel .content .info-table tr td .qr-div .thumbnail .btn {
            width: 80%;
            padding: 6px 0;
        }

        .download-box .qr-table {
            width: 100%;
        }

        .download-box .qr-table tr th {
            width: 120px;
            text-align: center;
        }

        .download-box .qr-table tr td {
            text-align: center;
            height: 39px;
            line-height: 39px;
        }

        .download-box .qr-table a .download {
            color: #B2B2B2
        }

        .download-box .qr-table a .download:hover {
            color: #333333
        }

        #alipay-auth-qrcode {
            text-align: center;
            display: none
        }

        #alipay-auth-qrcode .qrcode-img {
            padding: 30px;
        }
    </style>
</head>
<body>
<div id="container-wrap" style="display:none;">
    <div class="table-panel">
        <div class="header">
            <h4 class="title">商户信息</h4>
            <div class="btns-group">
                <input type="button" class="btn btn-primary" onclick="javascript:window.history.back()" value="返回"/>
            </div>
        </div>
        <div class="content">
            <table class="info-table">
                <tr>
                    <td class="left">商户名称：</td>
                    <td class="right">{{name}}</td>
                </tr>
                <tr>
                    <td class="left">商户简称：</td>
                    <td class="right">{{shortName}}</td>
                </tr>
                <tr>
                    <td class="left">审核状态：</td>
                    <td class="right">{{reviewTypeMap[reviewType]}}</td>
                </tr>
                <tr>
                    <td class="left">活动状态：</td>
                    <td class="right">{{statusMap[status]}}</td>
                </tr>
                <tr>
                    <td class="left">微信支付授权：</td>
                    <td class="right">
                        <span v-if="wxpayStatus == -1">无</span>
                        <span v-else-if="wxpayStatus == 1">已通过</span>
                    </td>
                </tr>
                <tr>
                    <td class="left">支付宝支付授权：</td>
                    <td class="right">
                        <span v-if="alipayStatus == -1">无</span>
                        <span v-else-if="alipayStatus == 1">已通过</span>
                        <span v-else-if="alipayStatus == 0">
								<input class="btn btn-success btn-sm auth-btn" type="button" value="授权"
                                       @click="grantAuth(id)">
							</span>
                    </td>
                </tr>
                <tr>
                    <td class="left">邮箱：</td>
                    <td class="right">{{email}}</td>
                </tr>
                <tr>
                    <td class="left">电话：</td>
                    <td class="right">{{phone}}</td>
                </tr>
                <tr>
                    <td class="left">地址：</td>
                    <td class="right">{{address}}</td>
                </tr>
                <tr>
                    <td class="left">创建时间：</td>
                    <td class="right">{{createTime}}</td>
                </tr>
                <tr>
                    <td class="left">过期时间：</td>
                    <td class="right">{{expireTime}}</td>
                </tr>
                <tr>
                    <td class="left">logo：</td>
                    <td class="right">
                        <img src="{{logo}}" style="height: 64px;width:64px;">
                    </td>
                </tr>
                <tr>
                    <td class="left" valign="top">聚合码：</td>
                    <td class="right" valign="top">
                        <template v-if="paycodes&&paycodes.length>0">
                            <div class="qr-div" v-for="(paycode,i) in paycodes">
                                <div class="col-sm-6 col-md-4">
                                    <div class="thumbnail">
                                        <img :src="paycode.imgUrl">
                                        <div class="caption">
                                            <h3>
												<span style="font-size:10px"
                                                      v-if="paycode.alias != null&&paycode.alias!=''">
													{{paycode.alias}}
												</span>
                                                <span style="font-size:10px" v-else>码{{i+1}}</span>
                                            </h3>
                                            <p>
                                                <input class="btn button btn-sm" type="button" value="下载"
                                                       @click="loadDownloadBox(i)">
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!--<div class="download-box" style="display: none">-->
    <!--<table class="qr-table">-->
    <!--<tr>-->
    <!--<th>二维码边长(cm)</th>-->
    <!--<th>建议扫描距离(米)</th>-->
    <!--<th>下载链接</th>-->
    <!--</tr>-->
    <!--<tr v-for="(qrcode,i) in qrcodes">-->
    <!--<td>{{qrcode.length}}</td>-->
    <!--<td>{{qrcode.scanDistance}}</td>-->
    <!--<td>-->
    <!--<a href="javascript:void(0);" @click="downLoadQr(i)">-->
    <!--<span class="glyphicon glyphicon-save download"></span>-->
    <!--</a>-->
    <!--</td>-->
    <!--</tr>-->
    <!--</table>-->
    <!--</div>-->

    <div class="download-box" style="display: none">
        <table class="qr-table">
            <tr>
                <th>规格</th>
                <th>下载链接</th>
            </tr>
            <tr>
                <td>长方形</td>
                <td>
                    <a href="javascript:void(0);" @click="downLoadQr(0)">
                        <span class="glyphicon glyphicon-save download"></span>
                    </a>
                </td>
            </tr>
            <tr>
                <td>正方形</td>
                <td>
                    <a href="javascript:void(0);" @click="downLoadQr(1)">
                        <span class="glyphicon glyphicon-save download"></span>
                    </a>
                </td>
            </tr>
        </table>
    </div>
</div>
<div id="alipay-auth-qrcode">
    <div class="qrcode-img"></div>
</div>
</body>
<script type="text/javascript">
    var data = {};

    function initVue() {
        initReviewType();
        initStatus();
        initQrMores();
        new Vue({
            el: "#container-wrap",
            data: data
        });
        Vue.nextTick(function () {
            $("#container-wrap").show();
        });
    };

    function request(callback) {
        var load_id = util.load();
        util.post({
            url: "detail",
            data: {id: id},
            success: function (result) {

                var paycodes = result.paycodes;
                $.extend(data, result);
                encodePaycode();
            },
            complete: function () {
                layer.close(load_id);
            }
        }, callback);
    };


    function grantAuth(id) {
        var url = "https://openauth.alipay.com/oauth2/appToAppAuth.htm?app_id=2019062565663045&redirect_uri=";
        var callback_url = "https://pay.yanlight.com/trade/alipay/providerSignGrant?";
        var load_id = util.load();
        util.post({
            url: "/alipay/getPid",
            data: {companyId: id},
            success: function (result) {
                layer.close(load_id);
                callback_url += "cid=" + id + "&pid=" + result.pid;
                callback_url = encodeURIComponent(callback_url);
                var auth_url = url + callback_url;
                openAlipayQrcode(auth_url);
            },
            complete: function () {
                layer.close(load_id);
            }
        });
    };

    function openAlipayQrcode(url) {
        var $div = $("#alipay-auth-qrcode");
        var $qrimg = $("#alipay-auth-qrcode .qrcode-img");
        $qrimg.html("").qrcode({
            text: url
        });
        layer.open({
            type: 1,
            shift: 2,
            closeBtn: 1,
            area: ['320px', '316px'],
            title: "特约商户支付宝授权",
            content: $div
        });
    };

    function encodePaycode() {
        var paycodes = data.paycodes;
        $.each(paycodes, function (i, paycode) {
            var qrCode = paycode.qrCode;
            var _qrCode = util.base64Encode(qrCode);
            paycode.qrCode = _qrCode;
            paycode.imgUrl = "unifiedQRcode.jpg?paycode=" + _qrCode;
        });
    };

    function loadDownloadBox(i) {
        var $div = $(".download-box");
        currentQRIndex = i;
        layer.open({
            type: 1,
            shift: 2,
            closeBtn: 1,
            area: ['450px', '160px'],
            title: "下载",
            content: $div
        });
    };

    function downLoadQr(i) {

        var type;
        var typeName;
        if (i == 0) {
            type = "9_14"
            typeName = "长方形"
        } else if (i == 1) {
            type = "9_9"
            typeName = "正方形"
        }

        var name = data.name
        var paycodes = data.paycodes;
        var paycode = paycodes[currentQRIndex].qrCode;

        console.log(paycode)

        var alias = paycodes[currentQRIndex].alias;
        if (alias == null || alias == "") {
            alias = "码" + (currentQRIndex + 1);
        }

        var rate = data.qrcodes[2].rate;
        var downLoadUrl = "downloadQR.jpg?paycode=" + paycode + "&type=" + type + "&rate=" + rate + "&name=" + name + "_" + alias + "_" + typeName;

        window.location.href = downLoadUrl;
        return;
    };

    function initReviewType() {
        var map = {};
        map["0"] = "审核中";
        map["1"] = "已通过";
        data.reviewTypeMap = map;
    };

    function initStatus() {
        var map = {};
        map["0"] = "冻结";
        map["1"] = "活动";
        data.statusMap = map;
    };

    function initQrMores() {
        var qrcodes = [];
        var qrcode = {};
        qrcode.length = "mini";
        qrcode.scanDistance = "0.5m";
        qrcode.rate = "3";
        qrcodes.push(qrcode);
        qrcode = {};
        qrcode.length = "small";
        qrcode.scanDistance = "0.5m";
        qrcode.rate = "4";
        qrcodes.push(qrcode);
        qrcode = {};
        qrcode.length = "8cm(建议下载)";
        qrcode.scanDistance = "0.5m";
        qrcode.rate = "6";
        qrcodes.push(qrcode);
        qrcode = {};
        qrcode.length = "12cm";
        qrcode.scanDistance = "0.8m";
        qrcode.rate = "8";
        qrcodes.push(qrcode);
        qrcode = {};
        qrcode.length = "15cm";
        qrcode.scanDistance = "1m";
        qrcode.rate = "10";
        qrcodes.push(qrcode);
        qrcode = {};
        qrcode.length = "30cm";
        qrcode.scanDistance = "1.5m";
        qrcode.rate = "20";
        qrcodes.push(qrcode);
        qrcode = {};
        qrcode.length = "50cm";
        qrcode.scanDistance = "2.5m";
        qrcode.rate = "30";
        qrcodes.push(qrcode);
        data.qrcodes = qrcodes;
    };

    function cancel() {
        window.history.back();
    };

    function initialize() {
        id = util.getParameter("id");
        request(initVue);
    }
</script>
</html>